<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <!--查询区-->
      <div class="table-page-search-wrapper">
        <a-form :form="form" layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="字典类型">
                <a-select show-search v-model="queryParam.dictType" placeholder="请选择" default-value="0">
                  <a-select-option value="">全部</a-select-option>
                  <template>
                    <a-select-option color="blue" v-for="dict in this.allDict" :key="dict.dictType">({{ dict.dictType }}){{ dict.dictName }}</a-select-option>
                  </template>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="数据KEY">
                <a-input v-model="queryParam.dictKey" placeholder="请输入数据KEY"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="显示内容">
                <a-input v-model="queryParam.dictValue" placeholder="请输入显示内容"/>
              </a-form-item>
            </a-col>
            <!--隐藏查询条件-->
            <template v-if="advanced">
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="handleSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
                <a @click="() => this.advanced = !this.advanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!--全局操作-->
      <div class="table-operator">
        <a-button type="primary" icon="download" @click="handleDownload" v-if="hasPerm('admin:gateway:dict:download')">下载</a-button>
        <a-button type="primary" icon="plus" @click="handleAdd" v-if="hasPerm('admin:gateway:dict:add')">新建</a-button>
        <a-button type="primary" @click="handleUpdateCache" v-if="hasPerm('admin:gateway:dict:updateCache')">更新缓存</a-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="delete" @click="handleMenuClick" v-if="hasPerm('admin:gateway:dict:delete')">
              <a-icon type="delete"/>
              删除
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px">
            批量操作
            <a-icon type="down"/>
          </a-button>
        </a-dropdown>
        <a-button type="primary" icon="download" @click="handleDownloadTemplate" v-if="hasPerm('admin:gateway:dict:upload')">批量导入模板</a-button>
        <a-upload
          name="file"
          :customRequest="handleUpload"
        >
          <a-button type="primary" icon="upload" v-if="hasPerm('admin:gateway:dict:upload')">批量导入</a-button>
        </a-upload>
      </div>
      <!--汇总-->
      <!--数据表格-->
      <a-table
        :rowKey=" (record => record.id)"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"
        :rowSelection="rowSelection"
        :loading="loading"
        @change="tableChange"
      >
        <!--字段扩展显示customRender-->
        <template v-slot:dictIcon="text">
          <a-badge :status="text" :text="dictFilter(text,'dict_icon')" />
        </template>
        <template v-slot:selectEnable="text">
          {{ dictFilter(text,'switch_state') }}
        </template>
        <!--行操作-->
        <template v-slot:action="text, record">
          <span>
            <a href="javascript:" @click="handleEdit(record)" v-if="hasPerm('admin:gateway:dict:edit')">编辑</a>
            <a-divider type="vertical"/>
            <a-popconfirm title="确定删除吗？" @confirm="handleDelete(record)" v-if="hasPerm('admin:gateway:dict:delete')">
              <a-icon slot="icon" type="question-circle-o" style="color: red"/>
              <a href="javascript:">删除</a>
            </a-popconfirm>
            <a-divider type="vertical"/>
          </span>
        </template>
      </a-table>
      <!--自定义组件-->
      <save ref="save" @refresh="refresh" />
    </a-card>
  </page-header-wrapper>
</template>
<script>
  import curdMixins from '@/utils/mixins/curdMixins'
  import { allType, getList, downloadFile, downloadTemplateFile, uploadFile, deleteByIds, updateCache } from '@/api/gateway/dict'
  import save from './save'
  export default {
    mixins: [curdMixins],
    components: {
      save
    },
    data () {
      this.columns = [
        {
          title: '字典类型',
          dataIndex: 'dictType'
        },
        {
          title: '字典类型名',
          dataIndex: 'dictName'
        },
        {
          title: '数据KEY',
          dataIndex: 'dictKey'
        },
        {
          title: '显示内容',
          dataIndex: 'dictValue'
        },
        {
          title: '徽标状态',
          dataIndex: 'dictIcon',
          scopedSlots: { customRender: 'dictIcon' }
        },
        {
          title: 'select启用',
          dataIndex: 'selectEnable',
          scopedSlots: { customRender: 'selectEnable' }
        },
        {
          title: '排序',
          dataIndex: 'priority'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ]
      return {
        // 多选操作
        multiOperator: [
          {
            key: 'delete',
            method: deleteByIds,
            msg: '批量删除成功'
          }
        ],
        dict_icon: {},
        switch_state: {},
        allDict: {},
        genTemp: null
      }
    },
    created () {
      this.getDictValue('dict_icon').then(res => {
        this.dict_icon = res.data
      })
      this.getDictValue('switch_state').then(res => {
        this.switch_state = res.data
      })
      allType().then(res => {
        this.allDict = res.data
      })
    },
    methods: {
      list (param) {
        return getList(param)
      },
      download (param) {
        return downloadFile(param)
      },
      downloadTemplate () {
        return downloadTemplateFile()
      },
      upload (file) {
        return uploadFile(file)
      },
      delete (record) {
        return deleteByIds({ ids: [record.id] })
      },
      handleUpdateCache (param) {
        updateCache(param).then(res => {
          if (res.code === '0000') {
              this.$message.success(res.msg)
          } else {
              this.$message.error(res.msg)
          }
        })
      }
    }
  }
</script>
<style scoped>
</style>
